import React, { PureComponent } from 'react'
import { Row, Col, Card,Form, Input, Button, Checkbox,Spin} from "antd"
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {connect} from "react-redux"
import {loginAysc} from "../action"

class Login extends PureComponent {
  onFinish = (values) => {
    let {loginAysc} = this.props
    loginAysc(values,this.props.history)
  };

  render() {
    let { isLoading } = this.props.userReducer

    return (
      <Spin spinning={isLoading}>
        <Row style={{marginTop:'100px'}}>
          <Col span={6} offset={9}>
            <Card title="请登录" extra={<a href="#">前往注册</a>}>
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                  remember: true,
                }}
                onFinish={this.onFinish}
              >
                <Form.Item
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your Username!',
                    },
                  ]}
                >
                  <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户账号" />
                </Form.Item>
                <Form.Item
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your Password!',
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="用户密码"
                  />
                </Form.Item>
                <Form.Item>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住我的账号</Checkbox>
                  </Form.Item>

                  <a className="login-form-forgot" href="#">
                    忘记密码？
                  </a>
                </Form.Item>

                <Form.Item>
                  <Button type="primary" htmlType="submit" className="login-form-button">
                    登录
                  </Button>
                  或 <a href="">还没有账号？前往注册</a>
                </Form.Item>
              </Form>
            </Card>
          </Col>
        </Row>
      </Spin>
    )
  }
}

const mapStateToProps=(state)=>{
  return state
}
export default connect(mapStateToProps, { 
  loginAysc
})(Login)
